v3.3.3

Compare Source

diff

Add parentheses for nullish coalescing in ternary (#​16391 by @​cdignam-segment)

This change adds clarity to operator precedence.

// Input
foo ? bar ?? foo : baz;
foo ?? bar ? a : b;
a ? b : foo ?? bar;

// Prettier 3.3.2
foo ? bar ?? foo : baz;
foo ?? bar ? a : b;
a ? b : foo ?? bar;

// Prettier 3.3.3
foo ? (bar ?? foo) : baz;
(foo ?? bar) ? a : b;
a ? b : (foo ?? bar);

Add parentheses for decorator expressions (#​16458 by @​y-schneider)

Prevent parentheses around member expressions or tagged template literals from being removed to follow the stricter parsing rules of TypeScript 5.5.

// Input
@​(foo`tagged template`)
class X {}

// Prettier 3.3.2
@​foo`tagged template`
class X {}

// Prettier 3.3.3
@​(foo`tagged template`)
class X {}

Support @let declaration syntax (#​16474 by @​sosukesuzuki)

Adds support for Angular v18 @let declaration syntax.

Please see the following code example. The @let declaration allows you to define local variables within the template:

@​let name = 'Frodo';

<h1>Dashboard for {{name}}</h1>
Hello, {{name}}

For more details, please refer to the excellent blog post by the Angular Team: Introducing @​let in Angular.

We also appreciate the Angular Team for kindly answering our questions to implement this feature.

v3.3.2

Compare Source

diff

Fix handlebars path expressions starts with @ (#​16358 by @​Princeyadav05)

{{! Input }}
<div>{{@&#8203;x.y.z}}</div>

{{! Prettier 3.3.1 }}
<div>{{@&#8203;x}}</div>

{{! Prettier 3.3.2 }}
<div>{{@&#8203;x.y.z}}</div>

v3.3.1

Compare Source

diff

Preserve empty lines in front matter (#​16347 by @​fisker)

<!-- Input -->
---
foo:
  - bar1

  - bar2

  - bar3
---
Markdown

<!-- Prettier 3.3.0 -->

---
foo:
  - bar1
  - bar2
  - bar3
---

Markdown

<!-- Prettier 3.3.1 -->
---
foo:
  - bar1

  - bar2

  - bar3
---

Markdown

Preserve explicit language in front matter (#​16348 by @​fisker)

<!-- Input -->
---yaml
title: Hello
slug: home
---

<!-- Prettier 3.3.0 -->
---
title: Hello
slug: home
---

<!-- Prettier 3.3.1 -->
---yaml
title: Hello
slug: home
---

Avoid line breaks in import attributes (#​16349 by @​fisker)

// Input
import something from "./some-very-very-very-very-very-very-very-very-long-path.json" with { type: "json" };

// Prettier 3.3.0
import something from "./some-very-very-very-very-very-very-very-very-long-path.json" with { type:
  "json" };

// Prettier 3.3.1
import something from "./some-very-very-very-very-very-very-very-very-long-path.json" with { type: "json" };

v3.3.0

Compare Source

diff

🔗 Release Notes

v3.2.5

Compare Source

diff

Support Angular inline styles as single template literal (#​15968 by @​sosukesuzuki)

Angular v17 supports single string inline styles.

// Input
@​Component({
  template: `<div>...</div>`,
  styles: `h1 { color: blue; }`,
})
export class AppComponent {}

// Prettier 3.2.4
@&#8203;Component({
  template: `<div>...</div>`,
  styles: `h1 { color: blue; }`,
})
export class AppComponent {}

// Prettier 3.2.5
@&#8203;Component({
  template: `<div>...</div>`,
  styles: `
    h1 {
      color: blue;
    }
  `,
})
export class AppComponent {}

Unexpected embedded formatting for Angular template (#​15969 by @​JounQin)

Computed template should not be considered as Angular component template

// Input
const template = "foobar";

@​Component({
  [template]: `<h1>{{       hello }}</h1>`,
})
export class AppComponent {}

// Prettier 3.2.4
const template = "foobar";

@&#8203;Component({
  [template]: `<h1>{{ hello }}</h1>`,
})
export class AppComponent {}

// Prettier 3.2.5
const template = "foobar";

@&#8203;Component({
  [template]: `<h1>{{       hello }}</h1>`,
})
export class AppComponent {}

Use "json" parser for tsconfig.json by default (#​16012 by @​sosukesuzuki)

In v2.3.0, we introduced "jsonc" parser which adds trialing comma by default.

When adding a new parser we also define how it will be used based on the linguist-languages data.

tsconfig.json is a special file used by TypeScript, it uses .json file extension, but it actually uses the JSON with Comments syntax. However, we found that there are many third-party tools not recognize it correctly because of the confusing .json file extension.

We decide to treat it as a JSON file for now to avoid the extra configuration step.

To keep using the "jsonc" parser for your tsconfig.json files, add the following to your .pretterrc file

{
  "overrides": [
    {
      "files": ["tsconfig.json", "jsconfig.json"],
      "options": {
        "parser": "jsonc"
      }
    }
  ]
}

v3.2.4

Compare Source

diff

Fix incorrect parser inference (#​15947 by @​fisker)

Files like .eslintrc.json were incorrectly formatted as JSONC files.

// Input
prettier --file-info .eslintrc.json
{ "ignored": false, "inferredParser": "jsonc" }

// Prettier 3.2.4
prettier --file-info .eslintrc.json
{ "ignored": false, "inferredParser": "json" }

v3.2.3

Compare Source

diff

Throw errors for invalid code (#​15881 by @​fisker, @​Josh-Cena, @​auvred)

// Input
1++;

// Prettier 3.2.2
1++;

// Prettier 3.2.3
SyntaxError: Invalid left-hand side expression in unary operation (1:1)
> 1 | 1++;
    | ^

// Input
try {} catch (error = 1){}

// Prettier 3.2.2
try {
} catch (error) {}

// Prettier 3.2.3
SyntaxError: Catch clause variable cannot have an initializer. (1:23)
> 1 | try {} catch (error = 1){}
    |                       ^

Fix parser inference (#​15927 by @​fisker)

// Prettier 3.2.2
prettier --file-info tsconfig.json
{ "ignored": false, "inferredParser": "json" }

// Prettier 3.2.3
prettier --file-info tsconfig.json
{ "ignored": false, "inferredParser": "jsonc" }